<template>
  <div>
    <div ref="echart" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
import func from '@/assets/js/func.js'
export default {
  mounted() {
    // 请求返回数据后  不推荐使用vue set变量
    this.$nextTick().then(() => {
      this.init();
    })
  },
  props: ['params'],
  computed: {
    saleVolume () {
      if (!this.params) return []
      return [{ value: this.params.carOutAuthed, name: '启辕认证'},{ value: this.params.carOutNotAuthed, name: '未认证'}]
    },
    // detectVolume(){
    //   if (!this.params) return []
    //   return [{ value: ((this.params.carOutAuthed/(this.params.carOutAuthed+this.params.carOutNotAuthed))*100).toFixed(2), name: '启辕认证' }]
    // },
    detectVolume(){
      if (!this.params) return []
      return [{ value: this.params.carOutAuthed, name: '启辕认证' }]
    },
    detectValue(){
       if (!this.params) return 0
      return (this.params.carOutAuthed/(this.params.carOutAuthed+this.params.carOutNotAuthed))
    }
  },
  watch: {
    'params' () {
      this.$nextTick().then(() => {
        this.init()
      })
    }
  },
  methods: {
    init () {
      var myChart = this.$echarts.init(this.$refs["echart"]);
      // 指定图表的配置项和数据
      var option = {
          // backgroundColor: "#12152b",
          tooltip : {
              formatter: "{a} <br/>{b} : {c}%"
          },
          title : {
              text: '销售出库启辕认证分析图',
              textStyle: {
                color: '#00dcde',
                // fontWeight: 'lighter',
                fontSize: 16,
              },
              left: 10,
              top: 0
          },

          // toolbox: {
          //     feature: {
          //         restore: {},
          //         saveAsImage: {}
          //     }
          // },
          series: [
              
              {
                  title:{
                    show:true,
                    color:'#fff',
                    fontSize:20,
                    offsetCenter: [0, '-22%'],
                  },
                  name: '业务指标',
                  type: 'gauge',
                  // radius: ['0', '60%'],
                  center: ['50%', '55%'],
                  detail: {
                    offsetCenter: [0, '10%'],
                    formatter:'{value}辆',
                    color:'#fff'
                  },
                  
                  axisLine: { // 坐标轴线
                      lineStyle: { // 属性lineStyle控制线条样式
                          color: [
                              [this.detectValue, '#F0BD26'],
                              [1, '#bfcbd9'],
                          ],
                          width: 30,
                          shadowColor: '#F0BD26', //默认透明
                          shadowOffsetX: 0,
                          shadowOffsetY: 0,
                          shadowBlur: 20,
                          opacity: 1,
                      }

                  },
                  splitLine: { //分隔线样式
                      show: false,
                  },
                  axisLabel: { //刻度标签
                      show: false,
                  },
                  axisTick: { //刻度样式
                      show: false,
                  },
                  //仪表盘指针。
                  pointer: {
                      //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
                      show: false,
                      //指针长度
                      length: '90%',
                      width: 0,
                  },
                  data: this.detectVolume,
              },
              
          ],
      };
      // var option = {
      //         backgroundColor: "#12152b",
      //         color: func.allColor(),
      //         textStyle: {
      //             // color: '#fff'
      //         },
      //         title : {
      //             text: '销售出库启辕认证分析图',
      //             textStyle: {
      //               color: '#fff',
      //               fontWeight: 'lighter',
      //               fontSize: 14,
      //             },
      //             left: 10,
      //             top: 10
      //         },
      //         tooltip : {
      //             trigger: 'item',
      //             formatter: "{a} <br/>{b} : {c} ({d}%)"
      //         },
      //         // legend: {
      //         //     orient: 'vertical',
      //         //     left: 'left',
      //         //     data: this.titleData,
      //         // },
      //         series : [{
      //             name: '访问来源',
      //             type: 'pie',
      //             radius: ['0', '60%'],
      //             center: ['50%', '55%'],
      //             data:this.saleVolume,
      //             itemStyle: {
      //                 emphasis: {
      //                     shadowBlur: 10,
      //                     shadowOffsetX: 0,
      //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
      //                 }
      //             }
      //         }]
      //     };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
     
    }
  }
};
</script>
